<template>
 <div class="app-container">
    <div class="block">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="日期" prop="auditTime">
        <el-date-picker
          v-model="datetimerange"
          type="datetimerange"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
          end-placeholder="结束日期"
          align="right"
          @change="change">
        </el-date-picker>
         
      </el-form-item>
      <el-form-item label="稽核清单名称" prop="auditListName">
        <el-select v-model="queryParams.auditListName" placeholder="请选择稽核清单名称"
                         :style="{width: '90%'}" @change="change">
                <el-option v-for="(item, index) in auditListNameOptions" :key="index" :label="item"
                          :value="item" ></el-option>
              </el-select>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery" >查询</el-button>
      </el-form-item>
    </el-form>
  </div>
    <div id="domid" ref="myChart" style="width:95%;height:300px"></div>
    <div>
      <!-- :span-method="objectSpanMethod" -->
      <el-table  
      
      :data="listOptions"
      >
        <el-table-column label="序号"  align="center" prop="auditId" >
          <template scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
        </el-table-column>
        <el-table-column label="稽核时间" align="center" show-overflow-tooltip prop="auditTime" />
        <el-table-column label="稽核人"   align="center" show-overflow-tooltip prop="auditName" />
        <el-table-column label="专案名称"  align="center" show-overflow-tooltip prop="projectName" />
        <el-table-column label="稽核区域"  align="center" show-overflow-tooltip prop="auditArea" />
        <el-table-column label="功能间"  align="center" show-overflow-tooltip prop="functionalArea" />
        <el-table-column label="电脑名称"  align="center" show-overflow-tooltip prop="computerName" />
        <el-table-column label="IP地址"  align="center" show-overflow-tooltip prop="computerIpAddress" />

        <el-table-column label="处理DRI工号"  align="center" show-overflow-tooltip prop="processDriId" />
        <el-table-column label="处理DRI姓名"  align="center" show-overflow-tooltip prop="processDriName" />
        <el-table-column label="违规项目"  align="center" show-overflow-tooltip prop="anIllegalProject" />
        <el-table-column label="稽核描述"  align="center" show-overflow-tooltip prop="auditDescribed" />
        <el-table-column label="异常处理部门"  align="center" show-overflow-tooltip prop="exceptionHdpt" />
        <el-table-column label="完成时间"  align="center" show-overflow-tooltip prop="completionTime" />
        <el-table-column label="解决进度"  align="center" prop="progress" />
        <el-table-column label="状态"  align="center" prop="alciState" />
        <el-table-column label="是否为BUD拟定"  align="center" prop="budWrite" />
        <el-table-column label="是否签署ARPA协议"  align="center" prop="signArpaAgreement" />
        <el-table-column label="上传清单"  align="center" show-overflow-tooltip prop="uploadListing" />
        <el-table-column label="是否脱敏"  align="center" prop="whetherDesensitization" />
        <el-table-column label="是否最小化给予"  align="center" prop="minimizeGiving" />
        <el-table-column label="图档内容"  align="center" show-overflow-tooltip prop="imageFileContent" />
        <el-table-column label="传图目的"  align="center" show-overflow-tooltip prop="uploadFigure" />
        <el-table-column label="有无违规"  align="center" prop="anyViolation" />
        <el-table-column label="处理办法"  align="center" show-overflow-tooltip prop="approach" />
        <el-table-column label="备注"  align="center" show-overflow-tooltip prop="remark" />
      </el-table>
    </div>
  </div>
</template>



<script>
import { recordsOptions } from "@/api/project/records";
import { getEcharts,getEchartsPie,getList } from "@/api/project/terminalAuditResult";
import loginVue from '../../login.vue';

  export default {
    name: "Chart",
    data(){
    return {
      showSearch: true,
      //时间选择器
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        auditTime: '',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          auditListName: ""
        },
        listOptions: [],
        datetimerange: [],
        auditListNameOptions: [],
        barOption: [],
        barOptionNum: [],
        pieOpitons: []
      }
    },
    created() {
      this.getauditListNameList();
      this.queryParams.auditListName = this.$route.query.auditListName  
      this.queryParams.pageNum = 1;                                                                                                                                                                                                                                                                                                                                                                                                                                                           
      this.getList()
      this.chars()
      this.drawChart()
    },
    
    methods: {
      getList(){
        //查询列表
       
        getList(this.queryParams).then(response => {
          this.listOptions = response.data
        })   
        
      },
      change(){
        this.chars();
      },
      chars(){
        const arr = []
        const arr1= []
        const arrs = [];
        getEcharts(this.addDateRange(this.queryParams,this.datetimerange)).then(response => {
            for(var i = 0;i<response.data.length;i ++){
              arr.push(JSON.parse(JSON.stringify(response.data[i].projectName)))
              arr1.push(JSON.parse(JSON.stringify(response.data[i].numHistogram)))
            } 
            
            this.barOption = arr
            this.barOptionNum = arr1
            console.log(this.barOption)
            console.log(this.barOptionNum)
        });
            
        //查询饼状图数据
        getEchartsPie(this.addDateRange(this.queryParams,this.datetimerange)).then(response => {
            for(var i = 0;i<response.data.length;i ++){
              arrs.splice(i,0,{value: response.data[i].num,name: response.data[i].mainClass})
              
            }
            this.pieOpitons = arrs
            console.log(this.pieOpitons)
        });
        data: this.barOption 
        data: this.barOptionNum 
        data: this.pieOpitons
       
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        this.chars();
        this.drawChart();
        
      },
      
      drawChart() {
        var echarts = require("echarts"); //引入echarts
        // 初始化echarts实例
        let myChart = echarts.init(this.$refs.myChart);
        window.addEventListener('resize',function () {//执行  
          myChart.resize();
        })

        //图表内容
        let option = {
          tooltip: {},
          title: [
            {
              text: '终端稽核缺失占比',
              left: '25%',
              textAlign: 'center'
            },
            {
              text: '异常稽核数据',
              left: '75%',
              textAlign: 'center'
            },
          ],
          grid: [
            {
              top: 1,
              width: '50%',
              bottom: '5%',
              left: 10,
              containLabel: true
            },
            {
              top: '55%',
              width: '50%',
              bottom: 0,
              left: 10,
              containLabel: true
            }
          ],
          legend: {
            top: 'bottom',
            left: '63%',
          },
          xAxis: {
            type: 'category',
            data: this.barOption
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'bar',
              data: this.barOptionNum,
              label: {
                position: 'right',
                show: true
              },    
              barWidth : 30,

            },

            {
              type: 'pie',
              radius: [0, '60%'],
              center: ['75%', '50%'],
              data: this.pieOpitons,
            },
          ],
        };
        // 绘制图表
        myChart.setOption(option,true);
      },

      //获取稽核清单名称下拉框
      getauditListNameList() {
      this.loading = true;
      recordsOptions().then(response => { 
        for(var x = 0;x<response.length;x ++){
          this.auditListNameOptions.push(response[x].auditListName);
        }
        for(var i = 0; i < this.auditListNameOptions.length;i ++) {  
            for (let j = i + 1; j < this.auditListNameOptions.length;j ++) {
                if (this.auditListNameOptions[i] == this.auditListNameOptions[j]) {
                    this.auditListNameOptions.splice(j, 1);
                    j--;
                }
            }
        }
        console.log(JSON.parse(JSON.stringify(this.auditListNameOptions)))
        this.loading = false;                                                                                                                                                                                                                                                                                                                                                                                                                                                         
      });
      console.log(JSON.parse(JSON.stringify(this.auditListNameOptions)))
    },
    },
    mounted() {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
      //在mounted中调用,确保myChart需要展示的标签渲染出来
      this.$nextTick(() => {
        setTimeout(() => {
          this.drawChart();
        });
      });
    },
  
  }                                                                                                                                                 
</script>

<style>
</style>                                                                                                                                                                                                                                                                                                                                                          